<template>
  <div style="height: 30px; display: flex; align-items: center">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/file/note-space' }"
        >笔记空间</el-breadcrumb-item
      >
      <el-breadcrumb-item>
        <el-text style="max-width: 200px; height: 16px" truncated>
          {{ title }}
        </el-text>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="note-space-wrapper" v-loading="loading">
    <div class="left">
      <Editor
        v-if="noteType === 'Document'"
        disabled
        v-model:title="noteData.title"
        :content="content"
      />
      <h2 v-if="noteType === 'FlowChart' || noteType === 'Xmind'">
        {{ noteData.title }}
      </h2>
      <MindMap v-if="noteType === 'Xmind'" :data="data.content" readonly />
      <diagram v-if="noteType === 'FlowChart'" :data="content" isSilentMode />
    </div>
    <div class="right">
      <div class="username" style="display: flex; gap: 20px">
        <div class="avatar">
          <el-image
            style="width: 60px"
            :src="imagePrefix + noteData.user_avatar"
            fit="cover"
          >
            <template #error>
              <el-icon :size="48">
                <component is="Avatar" />
              </el-icon>
            </template>
          </el-image>
        </div>
        <div
          class="user-info"
          style="display: flex; gap: 4px; flex-direction: column"
        >
          <div class="from">来自{{ noteData.user_name }}的分享</div>
          <div class="share-time">
            分享时间：{{ new Date(noteData.publish_at).toLocaleString() }}
          </div>
        </div>
      </div>
      <div class="view-praise-collect">
        <div style="display: flex; gap: 20px">
          <div class="item">
            <el-icon size="20">
              <View />
            </el-icon>
            <span>{{ noteData.view_num }}</span>
          </div>
          <div
            v-if="enumProccessTypeValue.Pass === noteData.status"
            class="item"
            @click="handleClick(noteData, 1)"
          >
            <el-icon
              size="20"
              :style="{
                color: noteData.is_praise ? '#ff5a5a' : '',
              }"
            >
              <AwesomeFilled />
            </el-icon>
            <span> {{ noteData.praise_num }}</span>
          </div>
          <div
            v-if="enumProccessTypeValue.Pass === noteData.status"
            class="item"
            @click="handleClick(noteData, 3)"
          >
            <el-icon
              size="20"
              :style="{
                color: noteData.is_collect ? '#fcb510' : '',
              }"
            >
              <StarFilled v-if="noteData.is_collect" />
              <Star v-else />
            </el-icon>
            <span>收藏</span>
          </div>
        </div>
        <!--  -->
      </div>
      <div
        class="comment-area"
        v-if="enumProccessTypeValue.Pass === noteData.status"
      >
        <div style="font-weight: 600">评论 {{ noteData.comment_num }}条</div>
        <Comment
          v-model:comment-total="noteData.comment_num"
          :sourceId="route.params.id"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, reactive } from 'vue'
import Editor from '../note/components/document.vue'
import MindMap from '@/components/mind-map/Index.vue'
import Diagram from '@/components/logic-flow-mvp/components/Diagram.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import StarFilled from '@/icons/StarFilled.vue'
import {
  httpGetDetailFromNoteSpace,
  httpPraiseNoteFromNoteSpace,
  httpCollectNoteFromNoteSpace,
} from '@/api/note'
import { debounce } from '@/utils/tools.ts'
import { useRoute } from 'vue-router'
import Comment from '@/components/comment/index.vue'
import AwesomeFilled from '@/icons/Awesome.vue'
import { enumProccessTypeValue } from '@/enum/note'
const imagePrefix = import.meta.env.VITE_IMAGE_SUFFIX
const data = reactive({
  content: {
    data: {
      text: '根节点',
    },
    children: [],
  },
})
const content = ref({})
const route = useRoute()
const noteData = ref({})
const noteType = ref('')
const loading = ref(false)
const title = ref('')
const handleClick = debounce(async (item, id) => {
  switch (id) {
    case 1:
      // 点赞
      const res = await httpPraiseNoteFromNoteSpace({ id: item.id })
      if (res) {
        item.is_praise = !item.is_praise
        item.praise_num = item.is_praise
          ? item.praise_num + 1
          : item.praise_num - 1
      }
      return
    case 3:
      // 收藏
      const resp = await httpCollectNoteFromNoteSpace({ id: item.id })
      if (resp) {
        item.is_collect = !item.is_collect
      }
      return item.is_collect ? 'orange' : ''
    default:
      return ''
  }
}, 300)
watch(
  () => route.params.id,
  async (value) => {
    loading.value = true
    const res = await httpGetDetailFromNoteSpace({ id: value })
    if (res) {
      title.value = res.info.title
      noteData.value = res.info
      noteType.value = res.info.icon
      if (res.info.icon === 'Xmind') {
        // ximnd
        data.content = res.info.note_content
          ? JSON.parse(res.info.note_content)
          : {
              data: {
                text: '根节点',
              },
              children: [],
            }
      } else if (res.info.icon === 'Document') {
        content.value = res.info.note_content
      } else if (res.info.icon === 'FlowChart') {
        //FlowChart
        content.value = res.info.note_content
          ? JSON.parse(res.info.note_content)
          : { nodes: [], edges: [] }
      }
    }
    loading.value = false
  },
  {
    immediate: true,
    deep: true,
  },
)
</script>
<style scoped lang="scss">
.note-space-wrapper {
  height: calc(100% - 30px);
  display: flex;
  .left {
    height: 100%;
    // width: 75%;
    flex: 1;
  }
  .right {
    height: 100%;
    // width: 25%;
    // flex: 1;
    padding: 10px;
    width: 360px !important;
    .view-praise-collect {
      border-bottom: 1px solid #ccc;
      padding-bottom: 8px;
      margin-bottom: 8px;
      .item {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        i {
          &.primary {
            color: var(--el-color-primary) !important;
          }
          &.orange {
            color: var(--el-color-warning) !important;
          }
          // &:hover {
          //   color: var(--el-color-primary) !important;
          // }
        }
      }
    }
    .comment-area {
      height: calc(100% - 100px);
      overflow: auto;
      @include scrollBar;
    }
  }
  #comment-section {
    min-width: 100% !important;
  }
}
</style>
